<template>
  <div class="flex h-full" :class="classList" :style="{ gap: gap, width: width }">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
interface FlexProps {
  direction?: 'row' | 'column';
  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
  align?: 'start' | 'center' | 'end';
  wrap?: boolean;
  gap?: any;
  width?: string | number;
}

const props = withDefaults(defineProps<FlexProps>(), {
  direction: 'row',
  justify: 'start',
  align: 'start',
  wrap: false,
  gap: 0,
  width: '100%',
});
const directionMap = {
  row: 'flex-row',
  column: 'flex-col',
};
const justifyMap = {
  start: 'justify-start',
  center: 'justify-center',
  end: 'justify-end',
  between: 'justify-between',
  around: 'justify-around',
};
const alignMap = {
  start: 'items-start',
  center: 'items-center',
  end: 'items-end',
};
const wrapMap = {
  true: 'flex-wrap',
};
const classMap = {
  direction: directionMap,
  justify: justifyMap,
  align: alignMap,
  wrap: wrapMap,
};
const classList = computed(() => {
  const result = Object.entries(classMap).reduce((acc, [key, value]) => {
    if (props[key as keyof typeof props]) {
      const propValue = props[key as keyof typeof props];
      if (propValue !== undefined && String(propValue) in value) {
        acc.push(value[propValue as keyof typeof value]);
      }
    }

    return acc;
  }, [] as string[]);
  result.push(`gap-${props.gap}`);
  return result;
});
</script>

<style scoped lang="css"></style>
